<template>
<div class="report abs full">
    <div class="rel full overflow-x-hidden">
        <product-header v-if="JSON.stringify(detail)!='{}'" :detail="detail" :simple="false"></product-header>
        <!-- 综述 -->
        <div class="overview">
            <p class="overview-header">综述</p>
            <div class="overview-content">本报告是通过人工智能的方式学习了全行业（数量）款重疾险条款后得出，旨在帮助您更好的理解重疾条款的各个方面。您选择展示的<span class="product-name" v-text="detail.PRODUCT_NAME"></span>在全行业的排名在（数据），属于行业<span class="product-name" v-text="'优秀'"></span>水平。您选择了揭黑和亮点两个模块，将分别向您揭示这款保险中存在的缺陷和优点。</div>
        </div>
        <!-- 揭黑 -->
        <div class="defect" v-if="reportData.MUCKRAKING&&JSON.stringify(reportData.MUCKRAKING) != '{}'" v-cloak>
            <p class="defect-header">揭黑</p>
            <div v-for="(value,key) in reportData.MUCKRAKING" :key="key" v-if="JSON.stringify(value) !='{}'">
                <!-- 维度标签 -->
                <div class="defect-content" @click='hiddenMK(key)'>
                    <span>{{key | fil}}</span>
                    <span v-if="value.SCORE" v-text="value.SCORE+'分'"></span>
                    <span v-if="value.RANK" v-text="'前'+value.RANK"></span>
                    <img v-show="key!=dimensionDetailMK" src="./image/open-icon.png">
                    <img v-show="key==dimensionDetailMK" src="./image/opened-icon.png">
                </div>
                <!-- 维度详情组件 -->
                <div v-show="key==dimensionDetailMK">
                    <div v-if="key=='DISEASE_DEFINITION'">
                        <report-item v-for="val in value.DISEASE_CONTENT.CONTENT" :key="val.DISEASE_NAME" :report-val="val"></report-item>
                    </div>
                    <div v-else>
                        <report-item v-for="(val,key_) in value" :key="key_" :report-val="val" :report-key="key_"></report-item>
                    </div>
                </div>
                <!-- 继续阅读只显示疾病维度 -->
                <div class="continue-read" v-if="reportData.IS_READ=='N'" v-cloak>
                    <div class="continue-read-btn" @click="goOnRead()">继续阅读</div>
                    <p class="continue-90">还有90%的精彩内容，购买继续阅读</p>
                    <p class="month-introduce">
                        <span v-if="reportData.CUSTOMER_DETAIL.customerType!='MONTH_MEMBER'">开通包月后，VIP会员享受最全面的优质服务，包月会员享受绝大部分优质服务，注册会员只能享受基本服务哦~~现在就开通<span class="pay-m" @click="payMonth()">包月支付</span><br/></span>
                        您还可以
                        <span class="pay-d" @click="payDay()">购买日包</span>，每天可查阅1000个哟
                    </p>
                </div>
            </div>
        </div>
        <!-- 亮点 -->
        <div class="good" v-if="reportData.HIGHLIGHTS&&JSON.stringify(reportData.HIGHLIGHTS) != '{}'&&reportData.IS_READ=='Y'" v-cloak>
            <p class="good-header">亮点</p>
            <div v-for="(value,key) in reportData.HIGHLIGHTS" :key="key">
                <div class="good-content" @click='hiddenHL(key)'>
                    <span>{{key | fil}}</span>
                    <span v-if="value.SCORE" v-text="value.SCORE+'分'"></span>
                    <span v-if="value.DISEASE_AMOUNT" v-text="'前'+value.RANK"></span>
                    <img v-show="key!=dimensionDetailHL" src="./image/open-icon.png">
                    <img v-show="key==dimensionDetailHL" src="./image/opened-icon.png">
                </div>
                <!-- 条款要求组件 -->
                <div v-show="key==dimensionDetailHL">
                    <div v-if="key=='DISEASE_DEFINITION'">
                        <report-item v-for="val in value.DISEASE_CONTENT.CONTENT" :key="val.DISEASE_NAME" :report-val="val"></report-item>
                    </div>
                    <div v-else>
                        <report-item v-for="(val,key_) in value" :key="key_" :report-val="val" :report-key="key_"></report-item>
                    </div>
                </div>
            </div>
        </div>
        <!-- <p class="shop-month">还不快去<span>购买包月</span>服务，首次购买尝鲜价<span>9.9元/月</span></p> -->
    </div>
</div>
</template>

<script>
import ProductHeader from '@/components/product-header/product-header.vue'
import ReportItem from '@/components/report-item/report-item.vue'
export default {
    name: 'report',
    components: {
        ProductHeader,
        ReportItem
    },
    data() {
        return {
            id: '',
            dimensionDetailHL: '', //亮点子维度详情展开合并flag
            dimensionDetailMK: '', //揭黑子维度详情展开合并flag
            detail: {},
            reportData: '' //报告数据
        }
    },
    mounted() {
        // 为方便调试把this暴露在Vue原型链下
        this.$pages.report = this;
    },
    filters: {
        fil(value) {
            switch (value) {
                case 'DISEASE_DEFINITION':
                    return value = '疾病定义';
                    break;
                case 'POLICY_LIABILITY':
                    return value = '保单责任';
                    break;
                case 'PRODUCT_PRICE':
                    return value = '产品价格';
                    break;
                case 'SERVICE_MODE':
                    return value = '服务方式';
                    break;
                case 'POLICY_MANAGEMENT':
                    return value = '保单管理';
                    break;
                case 'INSURANCE_COMPANY':
                    return value = '保险公司';
                    break;
                case 'MUCKRAKING':
                    return value = '揭黑';
                    break;
                case 'HIGHLIGHTS':
                    return value = '亮点';
                    break;
                default:
                    break;
            }
        }
    },
    activated() {
        document.title = '评价报告';
        this.id = this.getId();
        this.postReport();
        this.getHeadDetail();
    },
    deactivated() {
        this.id = '';
        this.detail = {};
        this.reportData = '';
        this.dimensionDetailHL = "";
        this.dimensionDetailMK = "";
    },
    methods: {
        getId() {
            return this.$route.query.id
        },
        // 继续阅读按钮
        goOnRead() {
            if (!this.id) {
                return;
            }
            this.$router.push('/pay-once?id=' + this.id);
        },
        // 包月支付
        payMonth() {
            if (!this.id) {
                return;
            }
            this.$router.push('/pay-month?id=' + this.id);
        },
        // 包天支付
        payDay() {
            if (!this.id) {
                return;
            }
            this.$router.push('/pay-day?id=' + this.id);
        },
        // 维度详情显示或隐藏
        hiddenHL(key) {
            if (this.dimensionDetailHL != key) {
                this.dimensionDetailHL = key;
                this.dimensionDetailMK = ""
            } else {
                this.dimensionDetailHL = ""
            }
        },
        hiddenMK(key) {
            if (this.dimensionDetailMK != key) {
                this.dimensionDetailMK = key;
                this.dimensionDetailHL = "";
            } else {
                this.dimensionDetailMK = ""
            }
        },
        // 获取评价报告数据
        postReport() {
            let that = this;
            let id = this.$route.query.id;
            // 获取保险ID
            if (!id) {
                this.showToast('出错了(保险id为空)', 'warning');
                return;
            }
            // 检查缓存有没有ID
            let ifCached = this.ifCached(id, 'report');
            if (ifCached) {
                this.reportData = ifCached;
                console.log("报告缓存");
                console.log(ifCached);
            } else {
                // 获取用户ID
                let customerId = this.$util.getCustomerId();
                if (!customerId) {
                    return;
                }
                // report-demo
                if (this.$route.name == "report-demo") {
                    // TO DO
                    // customerId = 1;
                    // this.id = 1;
                }
                // 请求数据
                this.$util.ajax(`/report/generate`, 'post', {
                    customerId: customerId,
                    insuranceId: id
                }, 'loading').then(function(data) {
                    console.log("评价报告");
                    console.log(data);
                    if (data.code == "100000") {
                        that.reportData = data.data;
                        if (data.data.IS_READ == 'Y') {
                            let report = that.$store.report;
                            report.unshift(data.data);
                            report = report.slice(0, 5);
                        }
                    }
                }).catch(function(err) {
                    console.log(err);
                });
            }
        },
        // 获取url参数中的保险ID,先去$store中查询是否有缓存
        ifCached(id, type) {
            if (type == 'report') {
                let report = this.$store.report;
                if (report.length == 0) {
                    return false;
                }
                for (let i = 0; i < report.length; i++) {
                    if (report[i].insuranceId == id) {
                        return report[i];
                        break;
                    }
                }
            } else if (type == 'detail') {
                let detail = this.$store.detail;
                if (detail.length == 0) {
                    return false;
                }
                for (let i = 0; i < detail.length; i++) {
                    if (detail[i].INSURANCE.PRODUCT_ID == id) {
                        return detail[i].INSURANCE;
                        break;
                    }
                }
            }
        },
        // 调接口获取指定id的product_header
        getHeadDetail() {
            this.detail = {};
            let that = this;
            let id = this.$route.query.id;
            if (!id) {
                this.showToast('出错了(保险id为空)', 'warning');
                return;
            }
            // 查询缓存中是否存在head信息
            let getDetail = this.ifCached(id, 'detail');
            if (getDetail) {
                that.detail = getDetail;
                console.log('缓存header');
                console.log(this.detail);
            } else {
                // 判断是否有customerId
                let customerId = this.$util.getCustomerId();
                if (!customerId) {
                    return;
                }
                this.$util.ajax('/evaluation/comprehensiveEvaluation', 'post', {
                    customerId: customerId,
                    insuranceId: id
                }).then(function(data) {
                    if (data.code == '100000') {
                        that.detail = data.data.INSURANCE;
                        console.log('接口header↓');
                        console.log(that.detail);
                    }
                });
            }
        }
    }
}
</script>

<style scoped>
.report.abs.full {
    background: url(../detail/image/star_bg.png);
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
}

.overview,
.defect,
.good {
    font-size: .3rem;
}

.good {
    margin-bottom: 1rem
}

.overview-header,
.defect-header,
.good-header {
    color: #9AC5FF;
    background: url(./image/header-icon.png) no-repeat;
    background-size: 2rem;
    line-height: .7rem;
    box-sizing: border-box;
    padding-left: .7rem;
    margin: .5rem 0 .2rem;
}

.overview-content,
.defect-content,
.good-content {
    color: #74A2DF;
    text-align: justify;
}

.overview-content {
    box-sizing: border-box;
    padding: 0 .4rem;
    font-size: .3rem;
    line-height: .5rem;
}

.overview-content .product-name {
    color: #fff
}

.defect-content,
.good-content {
    background: url(./image/content-bg.png);
    height: 1rem;
    line-height: 1rem;
    position: relative;
}

.defect-content span,
.good-content span {
    margin-left: .35rem
}

.defect-content img,
.good-content img {
    position: absolute;
    top: 50%;
    right: .5rem;
    transform: translate(0, -50%);
}

.defect-content:after,
.good-content:after {
    content: '';
    display: block;
    height: .02rem;
    background: url(./image/list-parting-line.png) no-repeat;
    background-size: 100%;
}

.defect-content:last-child:after,
.good-content:last-child:after {
    background: none;
}

.shop-month {
    font-size: .25rem;
    text-align: center;
    color: #88B0E7;
    margin-bottom: 1rem
}

.continue-read {
    color: #B0B6C1;
    font-size: .25rem;
}

.continue-read-btn {
    position: relative;
    font-size: .3rem;
    color: #BBC9DB;
    background-color: #185BB6;
    text-align: center;
    line-height: .7rem;
    margin: .3rem auto;
    width: 50%;
    height: .7rem;
    border-radius: .2rem;
}

.continue-90 {
    text-align: center;
    margin: 0;
}

.month-introduce {
    background: url(./image/Continue-read.png) no-repeat;
    background-size: 100% auto;
    box-sizing: border-box;
    padding: .2rem .4rem;
    line-height: .4rem;
    overflow: hidden;
    text-align: justify;
}

.month-introduce .pay-m,
.month-introduce .pay-d {
    color: #006cff;
}

.shop-month span {
    color: #FCE172;
}
</style>
